<template>
  <div>
    <Card>
      <div  class="search-con search-con-top">
        <Button style="margin-right: 10px;" type="primary" @click="addOrUpdate = true">添加</Button>
        <Button style="margin-right: 10px;" type="primary" @click="exportExcel">导出为Csv文件</Button>
        <Select v-model="searchKey" class="search-col" placeholder="请选择检索项">
          <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="item.key">{{ item.title }}</Option>
        </Select>
        <Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
        <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
      </div>
      
      <tables :height="innerHeight - 250" ref="tables" search-place="top" v-model="tableData" :columns="columns" :loading="tabLoading"/>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="total" size="small" show-elevator show-sizer @on-change="changePage" @on-page-size-change="pageSizeChange"/>
        </div>
      </div>
    </Card>
    <Modal v-model="addOrUpdate" :title="modelTitle" @on-ok="ok" @on-cancel="cancel" :mask-closable="false" width="700">
        <Form ref="addFrom" :model="addFrom" :label-width="100">
            <Row>
                <Col span="12">
                    <FormItem label="类型编码" prop="provTypeCode" :rules="{required: true, message: '请填写类型编码', trigger: 'blur'}">
                        <Input v-model="addFrom.provTypeCode" placeholder="请填写类型编码"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="类型名称" prop="provTypeName" :rules="{required: true, message: '请填写类型名称', trigger: 'blur'}">
                        <Input v-model="addFrom.provTypeName" placeholder="填写类型名称"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="类型图标" prop="provMinImage" :rules="{required: true, message: '请上传图标', trigger: 'blur'}">
                        <Input v-model="addFrom.provMinImage"   placeholder="请上传图标">
                            <Upload slot="append" :show-upload-list="false" :data="{uploadType:'prov',resultType:''}" :format="['jpg','jpeg','png']" :on-success="handleSuccess" :on-error="handleError" action="https://www.dxbeibei.com/wx.minproject.xiong.application/file/comm/msg/fileUpload.do">
                              <Button icon="ios-cloud-upload-outline"></Button>
                            </Upload>
                        </Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="类型标示" prop="attribute1">
                        <Input v-model="addFrom.attribute1" placeholder="填写类型标示"></Input>
                    </FormItem>
                </Col>
                
            </Row>
        </Form>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { tablePublicRequest } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      actionUrl:{
        "BATCH":"smc/base/SystemProviderType/saveSystemProviderType.json",
        "QRY":"smc/base/SystemProviderType/querySystemProviderType.json",
        "ADD":"smc/base/SystemProviderType/addSystemProviderType.do",
        "DEL":"smc/base/SystemProviderType/delSystemProviderType.do",
        "UPD":"smc/base/SystemProviderType/updSystemProviderType.do",
        "LKUP":"smc/base/SystemProviderType/lookupSystemProviderType.json",
        "LST":"smc/base/SystemProviderType/listSystemProviderType.json",
        "FIND":"smc/base/SystemProviderType/findSystemProviderType.json"
      },   
      innerHeight:document.body.clientHeight, 
      addOrUpdate: false,
      modelTitle:"新增",
      searchKey:"",
      searchValue:"",
      page:1,
      pageSize:10,
      total:0,
      search:{},
      tabLoading:true,
      addFrom:{
        provTypeName:'',
        provTypeCode:'',
        provMinImage:''
      },
      columns: [
        {title: '编码', key: 'provTypeCode', editable: true},
        {title: '名称', key: 'provTypeName', sortable: true},
        {title: '图片', key: 'provMinImage',render: (h, params) => {
            return h('div', {
              attrs: {
                style: 'width: 40px;height: 40px;'
              },
            }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src: `https://www.dxbeibei.com/wx.minproject.xiong.html/${params.row.provMinImage}`, style: 'width: 40px;height: 40px;border-radius: 2px;'
                  },
                  style: {
                  },
                }),
              ]);
          }
        },
        {title: '类型标示', key: 'attribute1', sortable: true},
        {
          title: '操作',
          key: 'handle',
          fixed:'left',
          width:80,
          button: [
            (h, params, vm) => {
              return h('Button', {
                  props: {
                    type: 'text',
                    ghost: true
                  },
                  attrs:{
                    style:"padding: 5px 0;"
                  },
                  on: {
                    'click': () => {
                      tablePublicRequest(this.actionUrl.FIND,{"id":params.row.provTypeId}).then(res => {
                        let data = res.data;
                        if(data.success){
                          this.addFrom = data.data || {};
                          this.addOrUpdate = true;
                        }
                      })
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-create',
                      size: 18,
                      color: '#000000'
                    }
                  })
              ])
            },
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?',
                  transfer:true
                },
                on: {
                  'on-ok': () => {
                    tablePublicRequest(this.actionUrl.DEL,{"id":params.row.provTypeId}).then(res => {
                      let data = res.data;
                      if(data.success){
                        this.$Message.info('删除成功！');
                        this.handleSearch();
                      }
                    })
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    ghost: true
                  },
                  attrs:{
                    style:"padding: 5px 0;"
                  },
                }, [
                  h('Icon', {
                    props: {
                      type: 'md-trash',
                      size: 18,
                      color: '#000000'
                    }
                  })
                ])
              ])
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    ok () {
      delete this.addFrom.createdAt;
      delete this.addFrom.lastedUpdAt;
      let url = this.addFrom.provTypeId?this.actionUrl.UPD:this.actionUrl.ADD;
      this.modelTitle = this.addFrom.provTypeId?"修改":"新增";
      
      tablePublicRequest(url,this.addFrom).then(res => {
        let data = res.data;
        if(data.success){
          this.$Message.info(`${this.modelTitle}成功！`);
          this.handleSearch();
          this.addFrom = {provMinImage:""};
        }
      })
    },
    cancel () {
        this.addFrom = {provMinImage:""};
    },
    changePage (data) {
      this.page = data;
      this.handleSearch();
    },
    pageSizeChange(data){
      this.pageSize = data;
      this.handleSearch();
    },
    handleSearch(){
      this.search = {page: this.page,pagesize: this.pageSize};
      this.search.searchRules=`[{"op":"contains","field":"${this.searchKey}","value":"${this.searchValue}","type":"text"}]`;
      this.setTableData(this.search);
    },
    setTableData(params){
      this.tabLoading = true;
      tablePublicRequest(this.actionUrl.QRY,params).then(res => {
        let data = res.data;
        if(data.success){
          let tdata = data.data;
          this.total = tdata.total;
          this.tabLoading = false;
          this.tableData = tdata.rows||[];
        }
      })
    },
    handleSuccess(res, file){
      this.$Message.info(res.msg);
      this.addFrom.provMinImage = res.path;
    },
    handleError(res, file){
      this.$Message.info(res.msg);
    }
  },
  mounted () {
    this.setTableData({page: this.page,pagesize: this.pageSize});
  }
}
</script>

<style>

</style>
